<%@page contentType="text/html" pageEncoding="UTF-8"%>

<style>

/*   #feedback { font-size: 1.4em; } */
#selectable .ui-selecting {
	background: #FECA40;
}

#selectable .ui-selected {
	background: #F39814;
	color: white;
}

#selectable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#selectable li {
	float: left;
	margin: 20px;
	padding: 20px;
	width: 128px;
	height: 128px;
	text-align: center;
}

.menu-panel a {
	position: relative;
}

.download {
	float: left;
}

.delete {
	float: right;
}

.ui-tooltip {
	width: 128px;
	height: 20px;
	text-align: center;
	opacity: 0.5;
}

</style>
<%@include file="/WEB-INF/pages/common/header.jsp"%>


<iframe id="downloadHandler" width="1" height="1"
	style="visibility: hidden; position: absolute; display: none"></iframe>

<ol id="selectable">
	<c:forEach var="file" items="${fileList}">

		<li id="${file.id}"><img
			src="${pageContext.request.contextPath}/assets/images/file.png">${file.name}</li>
	</c:forEach>

</ol>
<br>
<button id="popupUploadPanel" style="width: 100%;">UPLOAD...</button>

<%@include file="/WEB-INF/pages/common/footer.jsp"%>
<%@include file="dialog.jsp"%>


<script>
	function doDownload(id) {
		$('#downloadHandler').attr('src',
				'${pageContext.request.contextPath}/files/download?id=' + id);
	}
	function doDelete(id) {
		$(location).attr('href',
				'${pageContext.request.contextPath}/files/delete?id=' + id);
	}
	$(function() {
		// 		$("#selectable li").draggable();
		$("#selectable").selectable();

		//     $( "#selectable" ).sortable();

		$("#selectable")
				.tooltip(
						{
							items : "li",
							position : {
								my : "center bottom",
								at : "center bottom",
							},
							content : function() {
								var element = $(this);
								var text = element.text();
								return '<div><a class="download" href="#" onclick="doDownload('
										+ $(this).attr('id')
										+ ')">ダウンロード'
										+ '</a><a class="delete" href="#" onclick="doDelete('
										+ $(this).attr('id')
										+ ')">削除</a></div>';
							},
							show : null, // show immediately
							// 	      {
							// 	          effect: "drop",
							// 	          duration: "slow",
							// 	          delay: 1
							// 	       }, 

							open : function(event, ui) {
								if (typeof (event.originalEvent) === 'undefined') {
									return false;
								}

								var $id = $(ui.tooltip).attr('id');

								// close any lingering tooltips
								$('div.ui-tooltip').not('#' + $id).remove();

								// ajax function to pull in data and add it to the tooltip goes here
							}

							,
							close : function(event, ui) {
								ui.tooltip.hover(function() {
									$(this).stop(true).fadeTo(400, 1);
								}, function() {
									$(this).fadeOut('400', function() {
										$(this).remove();
// 										$(this).detach();
									});
								});
							}

						});
	});
</script>